<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>All the musics</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<script src="musicsData.js"></script>
	<script>
      $(document).ready(function(){
        $("#criteria").keyup(queryViaEnter);
        $("#btnSearch").click(query);
        loadData();
        
        function queryViaEnter() {
			var e = window.event;
			if (e.keyCode == "13") {		
				var myCriteria = $.trim($("#criteria").val());
				query(myCriteria);
			}
		}

        function search(paramCriteria) {
          clearTable();
          var count = 0;
          for(var i = 0; i < items.length; i++) {
            var item = items[i];
            if (paramCriteria != undefined) {
                if (item.toLowerCase().indexOf(paramCriteria.toLowerCase()) == -1) {
                    continue;
                }
			}
			count++;
            insertTable(item);
          }

          return count;
        }

        function clearTable(name, location) {
			$("#detail tbody tr").remove();
		}

		function insertTable(name) {
			$("<tr></tr>").append("<td>" + name + "</td>")
                       .append("<td><audio controls><source src='" + name + "' type='audio/mp3'></td>")
                       .appendTo("#detail tbody");
		}

		function loadData() {
            for(var i = 0; i < items.length; i++) {
              var item = items[i];
              insertTable(item);
            }
			$("#btnSearch").text(items.length);
		}

		function query(myCriteria) {
			var count = search(myCriteria);
			$("#btnSearch").text(count);
		}
      });
	</script>

</head>
<html lang="en">
<body>
<div style="margin:40px">
	<div id="condition">
	<div class="input-group col-xs-12" style="width:1000px">  
        <input type="text" name="keyword" id="criteria" class="form-control" placeholder="请输入名称，回车搜索">  
        <span class="input-group-btn">  
            <button class="btn btn-success" id="btnSearch" type="submit">N</button>  
        </span>
    </div>  
	</div>
	<div id="table">
		<table id="detail" class="table table-hover" style="width:1000px">
			<thead>
				<tr>
					<th>Location</th>
					<th>Size</th>
					<th>&nbsp;</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
</div>
</body>
</html>